<template>
  <ul class="news-list">
    <li>编号：{{ id }}</li>
    <li>标题：{{ title }}</li>
    <li>内容：{{ content }}</li>
  </ul>
</template>

<script setup lang="ts" name="Detail">
import { useRoute } from 'vue-router';
import { computed } from 'vue';


const  route = useRoute()
console.log('route:', route)
console.log('query: ',route.query, 'type:', typeof(route.query))


// 1. 定义props来接收路由参数
// defineProps({
//   id: String,
//   title: String,
//   content: String
// })

// 2. 直接定义名字 接收
defineProps(['id', 'title', 'content'])
</script>

<style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}

.news-list>li {
  line-height: 30px;
}
</style>